<template>
  <!-- 设备管理弹窗 -->
  <div class="equipDialog" v-if="isEquipShow">
    <transition name="el-zoom-in-top">
      <div class="positonBar" v-show="hideBarFromvuex">
        <div class="equip-item" tabindex="0" @click="handleDialog(1)">
          <div class="equip-icon"><i class="iconfont icon-feedback"></i></div>
          <div class="equip-text">管网资产总览</div>
        </div>
        <div class="equip-item" tabindex="0" @click="handleDialog(2)">
          <div class="equip-icon"><i class="iconfont icon-legend"></i></div>
          <div class="equip-text">单点信息查询</div>
        </div>
        <div class="equip-item" tabindex="0" @click="handleDialog(3)">
          <div class="equip-icon"><i class="iconfont icon-legend"></i></div>
          <div class="equip-text">空间查询统计</div>
        </div>
        <div class="equip-item" tabindex="0" @click="handleDialog(4)">
          <div class="equip-icon"><i class="iconfont icon-eagleeye"></i></div>
          <div class="equip-text">条件查询统计</div>
        </div>
        <div class="equip-item" tabindex="0" @click="handleDialog(5)">
          <div class="equip-icon"><i class="iconfont icon-eagleeye"></i></div>
          <div class="equip-text">管网设备统计</div>
        </div>
        <div class="equip-item" tabindex="0" @click="handleDialog(6)">
          <div class="equip-icon"><i class="iconfont icon-eagleeye"></i></div>
          <div class="equip-text">用户设备挂接</div>
        </div>
      </div>
    </transition>
    <div class="popup" ref="popup" style="pointer-events: none">
      <InfoPop
        ref="popInfo"
        v-show="isInfoPopShow"
        :dialogVisible="isInfoPopShow"
        @update:dialogVisible="isInfoPopShow = $event"
      ></InfoPop>
    </div>

    <EquipInfoShow
      v-if="isEquipInfoShow"
      :dialogVisible="isEquipInfoShow"
      @update:dialogVisible="isEquipInfoShow = $event"
    ></EquipInfoShow>
    <EquipInfoQuerySpatial
      v-if="isEquipInfoQuerySpatialShow"
      :dialogVisible="isEquipInfoQuerySpatialShow"
      @update:dialogVisible="isEquipInfoQuerySpatialShow = $event"
    ></EquipInfoQuerySpatial>
    <EquipInfoCategory
      v-if="isEquipInfoCategoryShow"
      :dialogVisible="isEquipInfoCategoryShow"
      @update:dialogVisible="isEquipInfoCategoryShow = $event"
    ></EquipInfoCategory>
    <EquipStatistic
     v-if="isEquipStatisticShow"
      :dialogVisible="isEquipStatisticShow"
      @update:dialogVisible="isEquipStatisticShow = $event"
    ></EquipStatistic>
    <!-- <UserEquipConnection
      v-show="isUserEquipShowPop"
      @update:dialogVisible="isUserEquipShow = $event"
    >
    </UserEquipConnection> -->
    <UserDevicePop v-show="isUserDeviceSonShowPop"> </UserDevicePop>
  </div>
</template>

<script>
import EquipInfoShow from "./components/EquipInfoShow.vue";
import EquipInfoQuerySpatial from "./components/EquipInfoQuerySpatial.vue";
import EquipStatistic from "./components/EquipStatistic.vue";
import InfoPop from "../MapTool/InfoPop.vue";
import EquipInfoCategory from "./components/EquipInfoCategory.vue";
import UserEquipConnection from "./components/UserEquipConnection.vue";
import UserDevicePop from "./components/UserDevicePop.vue";
import Overlay from "ol/Overlay";
import dmgis from "@/api/dmgis";
export default {
  name: "OEquipBar",
  components: {
    EquipInfoShow,
    EquipInfoQuerySpatial,
    EquipStatistic,
    InfoPop,
    EquipInfoCategory,
    UserEquipConnection,
    UserDevicePop,
    UserDevicePop,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      querySpatialLayer: null,
      isEquipInfoShow: false,
      isInfoPopShow: false,
      isEquipInfoQuerySpatialShow: false,
      isEquipInfoCategoryShow: false,
      isEquipStatisticShow: false,
      isUserEquipShow: false,
      projectLayer: null,
      TapMap: null,
      selectedCoordinates: null,
      queryDataList: [],
      popup: null,
      hideBar: true,
    };
  },
  computed: {
    isEquipShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
    isUserEquipShowPop() {
      return this.$store.state.isUserEquipShow;
    },
    isUserDeviceSonShowPop() {
      return this.$store.state.isUserDeviceSonShow;
    },
    hideBarFromvuex() {
      return this.$store.state.isEquipShow;
    },
  },
  methods: {
    initMap() {
      this.TapMap = this.$store.getters.Map;
      this.querySpatialLayer =
        this.TapMap.layer.createVectorLayer("空间查询点图层");
      if (this.popup == null) {
        let elPopup = this.$refs.popup;
        this.popup = new Overlay({
          element: elPopup,
          position: null,
          offset: [0, -10],
          positioning: "bottom-center",
        });
        this.TapMap.map.addOverlay(this.popup);
      }
    },
    initLayer() {
      this.projectLayer = this.$store.getters.projectLayer;
    },
    //设备点击查询
    clickQuery() {
      let mapcontanier = document.querySelector(".ol-viewport");
      mapcontanier.style.cursor = "crosshair";
      // 添加地图点击事件监听器
      this.getPointListener = (event) => {
        mapcontanier.style.cursor = "wait";
        const coordinate = event.coordinate;
        // 存储点击位置的经纬度
        this.selectedCoordinates = {
          lon: coordinate[0],
          lat: coordinate[1],
        };
        let getFeatureParams = new dmgis.object.FeatureServiceParam(
          "TapWaterMap"
        );
        let SpatialQuery = new dmgis.object.SpatialQuery();
        var rect = new dmgis.object.Envelope();
        rect.minx = this.selectedCoordinates.lon - 10;
        rect.miny = this.selectedCoordinates.lat - 10;
        rect.maxx = this.selectedCoordinates.lon + 10;
        rect.maxy = this.selectedCoordinates.lat + 10;
        SpatialQuery.env = rect; //矩形
        getFeatureParams.sql = SpatialQuery;

        let flag = false;
        let that = this;
        let layersAttribute = this.$store.state.layersAttribute;
        if (layersAttribute.length == 0) {
          this.$message.warning("请先获取服务图层");
          mapcontanier.style.cursor = "auto";
          this.TapMap.map.un("singleclick", this.getPointListener);
          return;
        }
        async function getFeatureByClcik() {
          let mapcontanier = document.querySelector(".ol-viewport");

          for (let item of layersAttribute) {
            console.log(item, "test");
            if (flag) {
              mapcontanier.style.cursor = "crosshair";
              break;
            }
            getFeatureParams.strlayername = item;
            await that.projectLayer
              .SendFeatureMapService(getFeatureParams)
              .then((res) => {
                if (res.objset) {
                  that.queryDataList = res.objset;
                  that.queryDataList[0].dataName = item;
                  flag = true;
                }
                // dmgis.olmap.ServiceLayer.prototype.HandleFeatureInfo =
                //   function (feature) {
                //     if (feature.objset) {
                //       that.queryDataList = feature.objset;
                //       that.queryDataList[0].dataName = item;
                //       flag = true;
                //     }
                //   };
              });
          }
          if (!flag) {
            that.$message.warning("未查询到相关数据");
            mapcontanier.style.cursor = "crosshair";
          }
        }
        getFeatureByClcik();
        // 点击后移除事件监听器
        // this.TapMap.map.un("singleclick", this.getPointListener);
      };
      this.TapMap.map.on("singleclick", this.getPointListener);
    },
    clickUserQuery() {
      let mapcontanier = document.querySelector(".ol-viewport");
      mapcontanier.style.cursor = "crosshair";
      // 添加地图点击事件监听器
      this.getPointListener = (event) => {
        mapcontanier.style.cursor = "wait";
        const coordinate = event.coordinate;
        // 存储点击位置的经纬度
        this.selectedCoordinates = {
          lon: coordinate[0],
          lat: coordinate[1],
        };
        let getFeatureParams = new dmgis.object.FeatureServiceParam(
          "TapWaterMap"
        );
        let SpatialQuery = new dmgis.object.SpatialQuery();
        var rect = new dmgis.object.Envelope();
        rect.minx = this.selectedCoordinates.lon - 10;
        rect.miny = this.selectedCoordinates.lat - 10;
        rect.maxx = this.selectedCoordinates.lon + 10;
        rect.maxy = this.selectedCoordinates.lat + 10;
        SpatialQuery.env = rect; //矩形
        getFeatureParams.sql = SpatialQuery;

        let flag = false;
        let that = this;
        let layersAttribute = [];
        this.$store.state.layersAttribute.forEach((item) => {
          if (item.includes("water_meter_info")) {
            layersAttribute.push(item);
          }
        });
        if (layersAttribute.length == 0) {
          this.$message.warning("请先获取服务图层");
          mapcontanier.style.cursor = "auto";
          this.TapMap.map.un("singleclick", this.getPointListener);
          return;
        }
        async function getFeatureByClcik() {
          let mapcontanier = document.querySelector(".ol-viewport");

          for (let item of layersAttribute) {
            if (flag) {
              mapcontanier.style.cursor = "auto";
              break;
            }
            getFeatureParams.strlayername = item;
            await that.projectLayer
              .SendFeatureMapService(getFeatureParams)
              .then((res) => {
                mapcontanier.style.cursor = "auto";
                if (res.objset) {
                  that.queryDataList = res.objset;
                  that.queryDataList[0].dataName = item;
                  flag = true;
                }
                // let feature = that.$store.state.dmGetFeature;
                // if (feature.objset) {
                //   that.queryDataList = feature.objset;
                //   that.queryDataList[0].dataName = item;
                //   flag = true;
                // }
              });
          }
          if (!flag) {
            that.$message.warning("未查询到相关数据");
            mapcontanier.style.cursor = "auto";
          }
        }
        getFeatureByClcik();
        // 点击后移除事件监听器
        this.TapMap.map.un("singleclick", this.getPointListener);
      };
      this.TapMap.map.on("singleclick", this.getPointListener);
    },
    handleDialog(index) {
      this.$store.commit("setisEquipShow", false);
      this.$store.commit("setisUserDeviceShow", false);
      let mapcontanier = document.querySelector(".ol-viewport");
      mapcontanier.style.cursor = "auto";
      if (this.getPointListener) {
        this.TapMap.map.un("singleclick", this.getPointListener);
      }

      switch (index) {
        case 1:
          this.isEquipInfoShow = !this.isEquipInfoShow;
          this.isEquipInfoQuerySpatialShow = false;
          (this.isEquipInfoCategoryShow = false),
            (this.isEquipStatisticShow = false);
          this.isUserEquipShow = false;
          this.$store.commit("setIsUserEquipShow", false);
          break;
        case 2:
          this.clickQuery();
          this.isEquipInfoShow = false;
          this.isEquipInfoQuerySpatialShow = false;
          this.isEquipInfoCategoryShow = false;
          this.isEquipStatisticShow = false;
          this.isUserEquipShow = false;
          this.$store.commit("setIsUserEquipShow", false);
          break;
        case 3:
          this.isEquipInfoShow = false;
          this.isEquipInfoQuerySpatialShow = !this.isEquipInfoQuerySpatialShow;
          this.isEquipInfoCategoryShow = false;
          this.isEquipStatisticShow = false;
          this.isUserEquipShow = false;
          this.$store.commit("setIsUserEquipShow", false);
          break;
        case 4:
          this.isEquipInfoShow = false;
          this.isEquipInfoQuerySpatialShow = false;
          this.isEquipInfoCategoryShow = !this.isEquipInfoCategoryShow;
          this.isEquipStatisticShow = false;
          this.isUserEquipShow = false;
          this.$store.commit("setIsUserEquipShow", false);
          break;
        case 5:
          this.isEquipInfoShow = false;
          this.isEquipInfoQuerySpatialShow = false;
          this.isEquipInfoCategoryShow = false;
          this.isUserEquipShow = false;
          this.isEquipStatisticShow = !this.isEquipStatisticShow;
          this.$store.commit("setIsUserEquipShow", false);
          break;
        case 6:
          this.$store.commit("setisUserDeviceShow", true);
          this.clickUserQuery();
          this.isEquipInfoShow = false;
          this.isEquipInfoQuerySpatialShow = false;
          this.isEquipInfoCategoryShow = false;
          this.isEquipStatisticShow = false;
          // this.isUserEquipShow = !this.isUserEquipShow;

          break;
        default:
      }
    },
  },
  watch: {
    queryDataList(newVal) {
      this.isInfoPopShow = false;
      if (!newVal) {
        this.$message.warning("请点击要素查询");
        return;
      }
      let rec = newVal[0].rec;
      this.$store.commit("setDetailDataPopList", newVal[0]);
      if (this.popup) {
        //弹窗赋值
        let coordinatePoint = [
          this.selectedCoordinates.lon,
          this.selectedCoordinates.lat,
        ];
        this.popup.setPosition(coordinatePoint);
        this.TapMap.panTo(coordinatePoint);
        this.isInfoPopShow = true;
      }
    },
  },
  mounted() {
    this.initMap();
    this.initLayer();
    this.$store.commit("setIsUserEquipShow", false);
  },
  destroyed() {
    this.isInfoPopShow = false;
    if (this.getPointListener) {
      this.TapMap.map.un("singleclick", this.getPointListener);
    }
    let mapcontanier = document.querySelector(".ol-viewport");
    mapcontanier.style.cursor = "auto";
    if (this.TapMap) {
      this.TapMap.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (layer.get("layerName") == "空间查询点图层") {
            layer.getSource().clear();
          }
        });

      this.TapMap.map.removeLayer(this.querySpatialLayer);

      this.TapMap.map.removeOverlay(this.popup);
    }
  },
};
</script>

<style lang="scss" scoped>
//快捷定位弹窗样式
.equipDialog {
  z-index: 1;
  font-size: 0.8rem;
  // background-color: #285383;
  color: white;
  // padding: 10px;
  position: absolute;
  top: 100%;
  width: 165px;
  box-sizing: border-box;

  .equip-item {
    display: flex;
    align-items: center;
    padding: 8px;
  }
  .positonBar {
    background-color: #285383;
    cursor: pointer;
  }
  // .equip-item:hover {
  //     background-color: #4998f2;
  // }
  .equip-item:focus {
    background-color: #4998f2;
  }
  .equip-item:hover {
    background-color: #4998f2;
  }
}
</style>
